<template>
	<view>
		<!-- 导航栏 -->
		<uni-nav-bar left-icon="left" title="就近加油" background-color="#3284fc" :border="false" :shadow="false"
			color="white" height="150rpx" @clickLeft="back" />
		<!-- 整个蓝色部分 -->
		<view class="top">
			<!-- 搜索框那一行 -->
			<view class="top1">
				<view style="width: 75%;">
					<uni-search-bar class="uni-mt-10" radius="100" placeholder="输入需要搜索的内容" clearButton="none"
						cancelButton="none" @confirm="search" />
				</view>
				<!-- #ifdef H5 -->
				<view class="zu1" @click="changemoudle" style="padding-top: 32rpx;">
				<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="zu1" @click="changemoudle">
					<!-- #endif -->
						<image class="zu1image" src="../../../static/车联网服务-05就近加油_slices/组 5@3x.png" mode=""></image>
						<view style="width: 60rpx;"><text class="wenzi">{{moudle}}</text></view>
					</view>
				</view>
				<!-- 汽油型号 -->
				<view class="top1-2" v-if="moudle == '地图模式'">
					<view class="top1-2-1">
						<view class="you">
							<view style="margin: 10rpx 20rpx;">90#</view>
						</view>
						<view class="you">
							<view style="margin: 10rpx 20rpx;">92#</view>
						</view>
						<view class="you">
							<view style="margin: 10rpx 20rpx;">93#</view>
						</view>
						<view class="you">
							<view style="margin: 10rpx 20rpx;">95#</view>
						</view>
						<view class="you">
							<view style="margin: 10rpx 20rpx;">97#</view>
						</view>
						<view class="you">
							<view style="margin: 10rpx 20rpx;">98#</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 白色部分 -->
			<view class="top2" v-if="moudle == '地图模式'">
				<view class="top2-1">
					<!-- 中国石油加油站 -->
					<view class="top2-1-1">
						<!-- 加油第一行 -->
						<view class="jiayou1">
							<view style="font-weight: bold;">
								中国石油加油站
							</view>
							<view class="mi">
								556m
							</view>
						</view>
						<!-- 加油第二行 -->
						<view class="manjian">
							<view class="manjian1">
								满200减30
							</view>
							<view class="manjian2">
								满500减60
							</view>
						</view>
						<!-- 加油第三行 -->
						<view class="xinagxi">
							<view class="photo">
								<image class="xiangxiphoto" src="../../../static/车联网服务-05就近加油_slices/佳佳.jpg"
									mode="widthFix">
								</image>
							</view>
							<view class="jieshao">
								<view class="time">
									营业时间： 周一至周五
								</view>
								<view class="money">
									￥ 5.66/升
								</view>
								<view class="address">
									山阳区人民路与解放路交叉口
									<image class="feiji" src="../../../static/车联网服务-05就近加油_slices/plane@3x.png"
										mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="top2-1">
					<!-- 中国石油加油站 -->
					<view class="top2-1-1">
						<!-- 加油第一行 -->
						<view class="jiayou1">
							<view style="font-weight: bold;">
								中国石油加油站
							</view>
							<view class="mi">
								556m
							</view>
						</view>
						<!-- 加油第二行 -->
						<view class="manjian">
							<view class="manjian1">
								满200减30
							</view>
							<view class="manjian2">
								满500减60
							</view>
						</view>
						<!-- 加油第三行 -->
						<view class="xinagxi">
							<view class="photo">
								<image class="xiangxiphoto" src="../../../static/车联网服务-05就近加油_slices/佳佳.jpg"
									mode="widthFix">
								</image>
							</view>
							<view class="jieshao">
								<view class="time">
									营业时间： 周一至周五
								</view>
								<view class="money">
									￥ 5.66/升
								</view>
								<view class="address">
									山阳区人民路与解放路交叉口
									<image class="feiji" src="../../../static/车联网服务-05就近加油_slices/plane@3x.png"
										mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="top2" v-if="moudle == '列表模式'">
				<!-- 地图 -->
				<view class="top2-1">
					<view class="page-section page-section-gap" style="padding: 20rpx;border-radius: 30rpx;">
						<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude"
							:markers="covers">
						</map>
						<view style="display: flex;
							flex-direction: row;
							justify-content:space-around;
							align-items:center;
							margin-top: 20rpx;
							padding-top: 20rpx;">
							<view style="font-size: 20rpx;
							color: #666666;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: left;">
								<view style="font-size: 30rpx;font-weight: bold;">
									中国石油加油站
								</view>
								<view class="address" style="padding: 20rpx 0rpx;">
									山阳区人民路与解放路交叉口
								</view>
								<navigator style="color: #3284fc;display: flex;
							justify-content:flex-start;" url="/packageFuelUp/pages/storeDetails/storeDetails">
									<uni-icons type="info" size="18" color="#3284fc"></uni-icons>门店详情>>
								</navigator>
							</view>
							<view class="photo">
								<image class="xiangxiphoto" src="../../../static/车联网服务-05就近加油_slices/佳佳.jpg"
									mode="widthFix">
								</image>
							</view>
						</view>
					</view>
					<view>
						<button type="button" style="background-color: #3284fc;border-radius: 40rpx;color: aliceblue;"
							@click="tiao" >立即导航</button>
					</view>
				</view>
			</view>

		</view>
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				moudle: '地图模式',
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					// iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					// iconPath: '../../../static/location.png'
				}]
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changemoudle() {
				this.moudle = this.moudle == '地图模式' ? '列表模式' : '地图模式'
			},
			tiao() {
				uni.navigateTo({
					url: '/packageFuelUp/pages/navigation/navigation'
				})
			}
		}
	}
</script>





<style>
	.top {
		width: 100%;
		height: 400rpx;
		background-color: #3284fc;
	}

	.top1 {
		display: flex;
		flex-direction: row;
		padding-top: 20rpx;
		justify-content: center;
	}

	

	.wenzi {
		font-size: 27rpx;
		color: white;
		position: relative;
		top: -107rpx;
		left: 30rpx;
	}

	.zu1image {
		width: 110rpx;
		height: 110rpx;
	}

	.top1-2 {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 20rpx;
		position: relative;
		top: -80rpx;
	}

	.top1-2-1 {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.you {
		margin: 0rpx 5rpx;
		color: white;
		border: 2rpx solid #f7f7f7;
		border-radius: 15rpx;
	}


	.top2 {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.top2-1 {
		width: 90%;
		height: 100%;
		background-color: white;
		margin-bottom: 40rpx;
		border-radius: 30rpx;
		position: relative;
		top: -100rpx;
	}

	.top2-1-1 {
		width: 90%;
		height: 100%;
		background-color: white;
		padding: 30rpx;
		border-radius: 50rpx;
	}

	.jiayou1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.mi {
		font-size: 22rpx;
		color: #0055ff;
	}

	.manjian {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 20rpx;
	}

	.manjian1 {
		background-color: #ffece5;
		color: #ff5500;
		font-size: 20rpx;
		padding: 15rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.manjian2 {
		background-color: #ffece5;
		color: #ff5500;
		font-size: 20rpx;
		padding: 15rpx;
		border-radius: 10rpx;
	}

	.xinagxi {
		display: flex;
		flex-direction: row;
		justify-content: left;
		align-items: center;
		margin-top: 20rpx;
	}

	.jieshao {
		padding-left: 20rpx;
		font-size: 20rpx;
		color: #666666;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: left;
	}

	.xiangxiphoto {
		width: 250rpx;
		border-radius: 18rpx;
	}

	.time {
		color: #151515;
	}

	.money {
		font-size: 25rpx;
		color: #ff5500;
		padding: 20rpx 0rpx;
	}

	.address {
		color: #151515;
	}

	.feiji {
		width: 23rpx;
		margin-left: 20rpx;
		position: relative;
		top: 5rpx;
	}
</style>